<!--
 * @Author: llgtfoo@163.com
 * @Date: 2020-08-09 18:50:37
 * @LastEditTime: 2020-09-14 08:50:50
 * @LastEditors: Please set LastEditors
 * @Description: 
 * @FilePath: \llgtfoo-conponents-boxs\plugins\components\dateTime\date-time.vue
 -->
<template>
  <div class='llgtfoo-date'>
    <slot :data='data'></slot>
  </div>
</template>
<script>
export default {
  name: "dateTime",
  data() {
    return {
      timer: null,
      nowWeek: "",
      nowDate: "",
      nowTime: "",
      data:{}
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.setNowTimes();
    }, 1000); //时间
  },
  beforeDestroy: function() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    setNowTimes() {
      const myDate = new Date();
      const wk = myDate.getDay();
      const yy = String(myDate.getFullYear());
      const mm = myDate.getMonth() + 1;
      const dd = String(
        myDate.getDate() < 10 ? `0${myDate.getDate()}` : myDate.getDate()
      );
      const hou = String(
        myDate.getHours() < 10 ? `0${myDate.getHours()}` : myDate.getHours()
      );
      const min = String(
        myDate.getMinutes() < 10
          ? `0${myDate.getMinutes()}`
          : myDate.getMinutes()
      );
      const sec = String(
        myDate.getSeconds() < 10
          ? `0${myDate.getSeconds()}`
          : myDate.getSeconds()
      );
      const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const week = weeks[wk];
      this.nowDate = `${yy}/${mm}/${dd} ${week}`;
      this.nowTime = `${hou}:${min}:${sec}`;
      this.nowWeek = week;
      this.data={
        year:yy,
        month:mm,
        day:dd,
        week:this.nowWeek,
        time:this.nowTime
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.date-time {
  color: #fff;
  width: max-content;
  display: flex;
  justify-content: flex-start;
  height: max-content;
  p {
    font-family: FZLanTingHei-EB-GBK Regular;
    &:first-of-type {
      // font-size: 25px;
      font-family: FZLanTingHei-EB-GBK Regular,
        FZLanTingHei-EB-GBK Regular-Regular;
      font-weight: bolder;
      text-align: right;
      color: #ffffff;
      letter-spacing: 2px;
      //   background: linear-gradient(180deg, #dcedff, #5ca9ff);
      // -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-right: 10px;
    }
    &:last-of-type {
      //    font-size: 25px;
      font-family: FZLanTingHei-EB-GBK Regular,
        FZLanTingHei-EB-GBK Regular-Regular;
      font-weight: bolder;
      text-align: right;
      color: #ffffff;
      letter-spacing: 2px;
      //   background: linear-gradient(180deg, #dcedff, #5ca9ff);
      // -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
